<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard | Booterator</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/chartist.min.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bootboard-nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap<span>Dashboard</span></a>
        </div>

        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>

        <ul class="nav navbar-nav navbar-right">
            <li>
                <i class="fa fa-user"></i>
                John Smith
            </li>
        </ul>
    </div>
</nav>





<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="collapse navbar-collapse" id="bootboard-nav">
                <ul class="nav nav-pills nav-stacked">
                    <li class="navigation-header">Control Panel</li>
                    <li class="active"><a href="#">Dashboard</a></li>
                    <li><a href="#">Applications</a></li>
                    <li><a href="#">Documentation</a></li>
                    <li><a href="#">Analytics</a></li>
                    <li><a href="#">Discussion</a></li>
                    <li><a href="#">Users</a></li>
                    <li class="navigation-header">Account</li>
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>
        </div>

        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header">
                        <h3>Charts
                            <small>A quick view of your website stats</small>
                        </h3>
                    </div>
                </div>
            </div>

            <div class="charts">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="ct-chart-one ct-perfect-fourth"></div>
                        Impressions
                    </div>
                    <div class="col-lg-4">
                        <div class="ct-chart-two ct-perfect-fourth"></div>
                        Clicks
                    </div>
                    <div class="col-lg-4">
                        <div class="ct-chart-three ct-perfect-fourth"></div>
                        Sales
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header">
                        <h3>Widgets
                            <small>Important stats about your websites</small>
                        </h3>
                    </div>
                </div>
            </div>

            <div class="row widgets">
                <div class="col-lg-3">
                    <div class="panel panel-success">
                        <div class="panel-heading">Impressions</div>
                        <div class="panel-body">
                            <h2>2,338</h2>
                            <i class="fa fa-arrow-circle-up"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="panel panel-danger">
                        <div class="panel-heading">Conversion Rate</div>
                        <div class="panel-body">
                            <h2>2.3%</h2>
                            <i class="fa fa-arrow-circle-down"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="panel panel-danger">
                        <div class="panel-heading">Mobile Visits</div>
                        <div class="panel-body">
                            <h2>1,453</h2>
                            <i class="fa fa-arrow-circle-down"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="panel panel-success">
                        <div class="panel-heading">New Visits</div>
                        <div class="panel-body">
                            <h2>52.4%</h2>
                            <i class="fa fa-arrow-circle-up"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Top Referals</div>
                        <table class="table table-striped table-bordered table-hover">
                            <tbody>
                            <tr>
                                <td>Google.com</td>
                                <td>1,656</td>
                            </tr>
                            <tr>
                                <td>facebook.com</td>
                                <td>1,453</td>
                            </tr>
                            <tr>
                                <td>twitter.com</td>
                                <td>945</td>
                            </tr>
                            <tr>
                                <td>pinterest.com</td>
                                <td>922</td>
                            </tr>
                            <tr>
                                <td>linkedin.com</td>
                                <td>844</td>
                            </tr>
                            <tr>
                                <td>bing.com</td>
                                <td>767</td>
                            </tr>
                            <tr>
                                <td>yahoo.com</td>
                                <td>672</td>
                            </tr>
                            <tr>
                                <td>msn.com</td>
                                <td>454</td>
                            </tr>
                            <tr>
                                <td>cbc.com</td>
                                <td>231</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="btn btn-primary">Show More</button>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Top Referals</div>
                        <table class="table table-striped table-bordered table-hover">
                            <tbody>
                            <tr>
                                <td>Google.com</td>
                                <td>1,656</td>
                            </tr>
                            <tr>
                                <td>facebook.com</td>
                                <td>1,453</td>
                            </tr>
                            <tr>
                                <td>twitter.com</td>
                                <td>945</td>
                            </tr>
                            <tr>
                                <td>pinterest.com</td>
                                <td>922</td>
                            </tr>
                            <tr>
                                <td>linkedin.com</td>
                                <td>844</td>
                            </tr>
                            <tr>
                                <td>bing.com</td>
                                <td>767</td>
                            </tr>
                            <tr>
                                <td>yahoo.com</td>
                                <td>672</td>
                            </tr>
                            <tr>
                                <td>msn.com</td>
                                <td>454</td>
                            </tr>
                            <tr>
                                <td>cbc.com</td>
                                <td>231</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="btn btn-primary">Show More</button>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header">
                        <h3>Table <small>More detailed information about your website</small></h3>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="ct-chart-table ct-golden-section"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Traffic Sources</div>
                        <table class="table table-striped table-bordered table-hover">
                            <tbody>
                            <tr>
                                <td>Organic Search</td>
                                <td>1,656</td>
                            </tr>
                            <tr>
                                <td>Referral</td>
                                <td>1,453</td>
                            </tr>
                            <tr>
                                <td>Direct</td>
                                <td>945</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="btn btn-primary">Show More</button>
                </div>
            </div>


        </div>
    </div>
</div>

<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <ul class="list-inline">
                    <li><a href="#"><i class="fa fa-facebook-official" ></i></a> </li>
                    <li><a href="#"><i class="fa fa-twitter-square" ></i></a> </li>
                    <li><a href="#"><i class="fa fa-pinterest-square" ></i></a> </li>
                    <li><a href="#"><i class="fa fa-linkedin-square" ></i></a> </li>
                    <li>&copy; 2017 Bootstrap Dashboard</li>
                </ul>
            </div>
        </div>
    </div>
</footer>

<!-- javascript //-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/chartist.min.js" type="text/javascript"></script>
<script src="js/bootboard-charts.js" type="text/javascript"></script>

</body>
</html>